<template>
  <button class="btn">
    <slot></slot>
  </button>
</template>

<script>
export default {};
</script>

<style scoped>
.btn {
  outline: none;
  padding: 0.7rem 1.1rem;
  border: none;
  background-image: linear-gradient(to right, #ff5e3a 0, #ff2a68 100%);
  border-radius: 3rem;
  color: white;
  text-align: center;
  font-weight: bold;
  transition: 0.3s;
}
.btn:hover {
  transform: scale(1.1, 1.1);
}

.btn:active {
  opacity: 0.7;
  background-image: linear-gradient(to right, #ec917d 0, #d36584 100%);
}
</style>
